<html>
<head>
  <script src="../src/org.wattdepot.client.js" type="text/javascript"></script>
  <title>Stoplight Visualization Example</title>
</head>
<body>
  <div id="titlediv" align="center" style="font-size:1.2em; font-weight:bold"><img src="http://www.google.com/ig/images/spinner.gif" /></div>
  <div id="datadiv" align="center"><img src="http://www.google.com/ig/images/spinner.gif" /></div>
  <div id="lastcheckdiv" align="center"><img src="http://www.google.com/ig/images/spinner.gif" /></div>
  <script>
  var unit;
  var source = "SIM_UH_KELLER";
  var dataDisplayed = "powerConsumed";
  var refreshInterval = 100000;
  var green = 100000;
  var red = 150000;
  var direction = 0;
  var WDClient = new org.WattDepot.Client("http://server.wattdepot.org:8182/wattdepot/");
  sendQuery();
  
  function sendQuery() {
    document.getElementById('titlediv').innerHTML = generateTitle(source, dataDisplayed);      
    document.getElementById('lastcheckdiv').innerHTML = generateCheckDate();
    WDClient.getSourceLatestSensorData(source, handleQuery);
    setTimeout("sendQuery()",refreshInterval);
  }
  
  function handleQuery(response) {
	var value = WDClient.getPropertyValue(response, dataDisplayed);
	document.getElementById('datadiv').innerHTML = generateStoplight(value, green, red, direction, unit);
  }
    
  function generateTitle(source, dataDisplayed) {
    var html = [];
    html.push(source);
    if (dataDisplayed == "energyGeneratedToDate") {
      html.push(" Energy Generated");
      unit = "Watt Hours";
    }
    else if (dataDisplayed == "energyConsumedToDate") {
      html.push(" Energy Consumed");
      unit = "Watt Hours";
    }
    else if (dataDisplayed == "powerGenerated") {
      html.push(" Power Generated");
      unit = "Watts";
    }
    else if (dataDisplayed == "powerConsumed") {
      html.push(" Power Consumed");
      unit = "Watts";
    }
    else {
      html.push(dataDisplayed);
    }
    return html.join('');
  }

  function generateStoplight(value, green, red, direction, unit) {
    var html = [];

    if (direction == 0 ) {
      if (value <= green) {
        html.push('<img src=\"http://stoplightgadget.googlecode.com/svn/trunk/Stoplight_Gadget/Image/stoplight_green.png\" width = 120 height = 160 />');
		html.push('</br><b>low</b>');
      }
      else if (value >= red) {
        html.push('<img src=\"http://stoplightgadget.googlecode.com/svn/trunk/Stoplight_Gadget/Image/stoplight_red.png\" width = 120 height = 160 />');
		html.push('</br><b>high</b>');
      }
      else {
        html.push('<img src=\"http://stoplightgadget.googlecode.com/svn/trunk/Stoplight_Gadget/Image/stoplight_yellow.png\" width = 120 height = 160 />');
		html.push('</br><b>medium</b>');
      }  
    }
    else if (direction == 1 ) {
      if (value >= green) {
        html.push('<img src=\"http://stoplightgadget.googlecode.com/svn/trunk/Stoplight_Gadget/Image/stoplight_green.png\" width = 120 height = 160 />');
		html.push('</br><b>high</b>');
      }
      else if (value <= red) {
        html.push('<img src=\"http://stoplightgadget.googlecode.com/svn/trunk/Stoplight_Gadget/Image/stoplight_red.png\" width = 120 height = 160 />');
		html.push('</br><b>low</b>');
      }
      else {
        html.push('<img src=\"http://stoplightgadget.googlecode.com/svn/trunk/Stoplight_Gadget/Image/stoplight_yellow.png\" width = 120 height = 160 />');
        html.push('</br><b>medium</b>');
	  }  
    }
	html.push("<p>" + value + " " + unit + "</p>");
    return html.join('');
  }
  
  function generateCheckDate() {
    var html = [];
    var checkDate = new Date();
    var months = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
    html.push("<p style = \"font-size:0.8em; font-style: italic\">Last check was at: ");
    html.push(months[checkDate.getMonth()]);
    html.push(" " + checkDate.getDate() + ", " + checkDate.getFullYear() + " ");
    html.push(checkDate.toLocaleTimeString());
    html.push("</p>");
    return html.join('');
  }
  </script>
</body>
</html>
